<template>
	<view class="hot-wrap pt-32">
		<view class="hot-title">
			<view
				class="title-text"
				:class="{ active: activeIndex === 0 }"
				@click="changeTab(0)"
				v-if="resortList.length > 0"
			>
				热门景区
			</view>
			<view
				class="title-text"
				:class="{ active: activeIndex === 1 }"
				@click="changeTab(1)"
				v-if="lineList.length > 0"
			>
				爆款线路
			</view>
		</view>
		<scroll-view scroll-x="true" scroll-left="0" class="scroll-container">
			<view v-for="(item, index) in activeData" :key="index" class="scroll-item" @click.stop="handleClick(item)">
				<view class="cover" :style="{ 'background-image': 'url(' + item.cover_url + ')' }">
					<image
						:src="imgBaseUrl + 'level-' + item.quality_level + '.png'"
						class="level-tag"
						v-if="item.quality_level > 0"
					/>
				</view>
				<view class="p-16 item-content space-between">
					<view>
						<view class="name text-ellipsis">{{ item.name }}</view>
						<zjy-labels
							:customClass="'no-wrap'"
							:data="item.sale_tips"
							v-if="item.sale_tips"
							:keyName="'title'"
						/>
					</view>
					<view class="flex-a-baseline mt-16">
						<view>
							<text class="c-red font-bold fs-24">&yen;</text>
							<text class="c-red font-bold fs-32 mlr-4">
								{{ priceInCent(item.lowest_price_in_cent) }}
							</text>
						</view>
						<text class="c-black-_4 fs-24">起</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
import { priceInCent } from "@/mixins/mixins"
import ZjyLabels from "@/components/zjy-labels.vue"
import { navigateTo } from "@/utils/page-redirect"
const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps({
	resortList: {
		type: Array,
		default: [],
	},
	lineList: {
		type: Array,
		default: [],
	},
})

const activeIndex = ref(0)

const activeData = computed(() => {
	return activeIndex.value === 0 ? props.resortList : props.lineList
})

const changeTab = (index: number) => {
	activeIndex.value = index
}

const handleClick = (item: any) => {
	if (activeIndex.value === 0) {
		navigateTo(`/pages/hy/scenic/detail?id=${item.id}`)
	}
	// 线路
	if (activeIndex.value === 1) {
		navigateTo(`/pages/product/trip/index?id=${item.id}`)
	}
}

onMounted(() => {
	nextTick(() => {
		if (props.resortList.length === 0 && props.lineList.length > 0) {
			activeIndex.value = 1
		}
	})
})
</script>
<style lang="scss" scoped>
.hot-wrap {
	.hot-title {
		display: flex;
		align-items: center;
		.title-text {
			margin-right: 28rpx;
			color: $c-black-1d;
			font-size: 32rpx;
			&.active {
				position: relative;
				font-weight: 600;
				font-size: 36rpx;
				z-index: 2;
				&:before {
					content: "";
					position: absolute;
					left: 20rpx;
					bottom: 0;
					height: 24rpx;
					width: 96rpx;
					background: url($imgBaseUrl + "icon-title-active.png") no-repeat center center;
					background-size: cover;
					z-index: -1;
				}
			}
		}
	}
	.scroll-container {
		white-space: nowrap;
		margin-top: 24rpx;
		.scroll-item {
			display: inline-block;
			width: 280rpx;
			height: 452rpx;
			background: $c-white;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 16rpx;
			&:last-child {
				margin-right: 0;
			}
			.cover {
				position: relative;
				height: 280rpx;
				padding-bottom: 100%;
				background-position: center center;
				background-size: cover;
				.level-tag {
					position: absolute;
					left: 4rpx;
					top: 4rpx;
					width: 44rpx;
					height: 48rpx;
				}
			}
			.item-content {
				height: calc(100% - 280rpx);
				display: flex;
				flex-direction: column;
				.name {
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				.price {
					margin: 0 4rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
